import React, { memo, useCallback } from 'react';
import { Card, Button, Tag, Space, Checkbox, Tooltip, Badge } from 'antd';
import { EditOutlined, DeleteOutlined, EyeOutlined, FolderOutlined, BookOutlined } from '@ant-design/icons';
import type { ICourseCategoryCardProps } from '@/types/components/courseCategory';
import { CourseCategoryStatusEnum } from '@/types/course';
import styles from './CourseCategoryCard.module.css';

/**
 * 课程分类卡片组件
 * @description 用于显示单个课程分类的基本信息，支持编辑、删除、查看关联课程等操作
 */
const CourseCategoryCard: React.FC<ICourseCategoryCardProps> = memo(({
  category,
  courseCount,
  onEdit,
  onDelete,
  onViewCourses,
  className,
  showActions = true,
  selectable = false,
  selected = false,
  onSelect
}) => {
  // 处理编辑操作
  const handleEdit = useCallback(() => {
    onEdit?.(category.id);
  }, [category.id, onEdit]);

  // 处理删除操作
  const handleDelete = useCallback(() => {
    onDelete?.(category.id);
  }, [category.id, onDelete]);

  // 处理查看关联课程操作
  const handleViewCourses = useCallback(() => {
    onViewCourses?.(category.id);
  }, [category.id, onViewCourses]);

  // 处理选择操作
  const handleSelect = useCallback((checked: boolean) => {
    onSelect?.(category.id, checked);
  }, [category.id, onSelect]);

  // 获取状态标签
  const getStatusTag = () => {
    const statusConfig = {
      [CourseCategoryStatusEnum.ACTIVE]: { color: 'green', text: '正常' },
      [CourseCategoryStatusEnum.DISABLED]: { color: 'orange', text: '禁用' },
      [CourseCategoryStatusEnum.DELETED]: { color: 'red', text: '已删除' }
    };

    const config = statusConfig[category.status] || { color: 'default', text: '未知' };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

  // 渲染操作按钮
  const renderActions = () => {
    if (!showActions) return null;

    return (
      <Space size="small">
        {onViewCourses && (
          <Tooltip title="查看关联课程">
            <Button
              type="text"
              size="small"
              icon={<EyeOutlined />}
              onClick={handleViewCourses}
            />
          </Tooltip>
        )}
        {onEdit && (
          <Tooltip title="编辑">
            <Button
              type="text"
              size="small"
              icon={<EditOutlined />}
              onClick={handleEdit}
            />
          </Tooltip>
        )}
        {onDelete && courseCount === 0 && (
          <Tooltip title="删除">
            <Button
              type="text"
              size="small"
              danger
              icon={<DeleteOutlined />}
              onClick={handleDelete}
            />
          </Tooltip>
        )}
        {onDelete && courseCount > 0 && (
          <Tooltip title={`该分类下有 ${courseCount} 个课程，无法删除`}>
            <Button
              type="text"
              size="small"
              danger
              disabled
              icon={<DeleteOutlined />}
            />
          </Tooltip>
        )}
      </Space>
    );
  };

  // 渲染卡片标题
  const renderTitle = () => (
    <div className={styles.cardTitle}>
      {selectable && (
        <Checkbox
          checked={selected}
          onChange={(e) => handleSelect(e.target.checked)}
          className={styles.checkbox}
        />
      )}
      <div 
        className={styles.colorIndicator} 
        style={{ backgroundColor: category.color }}
      />
      <FolderOutlined className={styles.titleIcon} />
      <span className={styles.categoryName}>{category.name}</span>
      {getStatusTag()}
    </div>
  );

  return (
    <Card
      className={`${styles.categoryCard} ${className || ''} ${selected ? styles.selected : ''}`}
      title={renderTitle()}
      extra={renderActions()}
      size="small"
      hoverable
    >
      <div className={styles.cardContent}>
        <div className={styles.infoRow}>
          <span className={styles.label}>分类代码：</span>
          <span className={styles.value}>{category.categoryCode}</span>
        </div>
        
        <div className={styles.infoRow}>
          <BookOutlined className={styles.courseIcon} />
          <span className={styles.label}>关联课程：</span>
          <Badge 
            count={courseCount} 
            showZero 
            className={styles.courseBadge}
            style={{ backgroundColor: category.color }}
          />
        </div>
        
        <div className={styles.infoRow}>
          <span className={styles.label}>排序权重：</span>
          <span className={styles.value}>{category.sortOrder}</span>
        </div>
        
        {category.description && (
          <div className={styles.descriptionRow}>
            <span className={styles.label}>描述：</span>
            <span className={styles.description}>{category.description}</span>
          </div>
        )}
      </div>
    </Card>
  );
});

CourseCategoryCard.displayName = 'CourseCategoryCard';

export default CourseCategoryCard;